<template>
	<view class="invoice">
		<view class="invoiceHead">
			<text>人工开票时间预算7-10日时间内，通过电子邮件发送</text>
		</view>
		<view class="invoiceForm">
			<!-- <u--form :model="model1" :rules="rules" ref="uForm" labelWidth="64">
				<u-form-item label="姓名" prop="type" borderBottom ref="item1">
					<u--input v-model="model1.type" border="none"></u--input>
				</u-form-item>
			</u--form> -->
			<view class="formType">
				<view class="leftView">
					<text>发票类型</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.typeName" border="none" color="#5E676E"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>抬头类型</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView">
					<u-radio-group v-model="form.radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>抬头名称</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.name" border="none" color="#5E676E"></u-input>
				</view>
			</view>
			<view class="formType" v-if="form.radiovalue1==2">
				<view class="leftView">
					<text>单位税号</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.entity" border="none" color="#5E676E"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>电子邮箱</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.email" border="none" color="#5E676E"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>订单编号</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.orderSn" border="none" color="#5E676E"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>下单日期</text>
					<text style="color: red;">*</text>
				</view>
				<view class="rightView" @click="open">
					<u-input v-model="form.date" disabled disabledColor="#fff" border="none" color="#5E676E" suffixIcon="calendar"
						suffixIconStyle="color: rgba(68, 212, 168, 1);width:32rpx;height:32rpx"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>{{form.radiovalue1==2?'注册地址':'地址'}}</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.registerAddress" border="none" color="#5E676E" placeholder="选填"></u-input>
				</view>
			</view>
			<view class="formType">
				<view class="leftView">
					<text>{{form.radiovalue1==2?'注册电话':'电话'}}</text>
				</view>
				<view class="rightView">
					<u-input v-model="form.registerPhone" border="none" color="#5E676E" placeholder="选填"></u-input>
				</view>
			</view>
		</view>
		<view class="commonBtn" @tap="goto('pages/owns/invoice/invoiceDetail')">
			<view class="btnCon">
				<text>申请开票</text>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="form.date" mode="date" @cancel="show = false"
			@confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					type: '电子普通发票'
				},
				rules: {},
				show: false,
				form: {
					typeName: "电子普通发票",
					// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
					radiovalue1: 1,
					name: "东莞乐京网络",
					entity: "954984954561651",
					email: "1022302@qq.com",
					orderSn: "202545564616165",
					date: Number(new Date()),
					registerAddress: "",
					registerPhone: ""
				},
				radiolist1: [{
						id: 1,
						name: '个人/非个人',
						disabled: false
					},
					{
						id: 2,
						name: '企业单位',
						disabled: false
					}
				],
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			open() {
				this.show = true
			},
			confirm(e) {
				console.log('e:', e);
				this.form.date = e.value
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.invoice {
		position: relative;

		.invoiceHead {
			padding: 20rpx 24rpx;
			background: rgba(255, 240, 230, 1);
			color: rgba(255, 140, 64, 1);
			font-size: 24rpx;
			font-weight: 400;
		}

		.invoiceForm {
			padding: 0 28rpx;
			background: #fff;

			.formType {
				display: flex;
				align-items: center;
				// margin: 28rpx 0;
				padding: 28rpx 0;
				border-bottom: 2rpx solid #f5f5f5;

				.leftView {
					font-weight: 500;
					letter-spacing: 0px;
					color: rgba(54, 68, 79, 1);
					font-size: 28rpx;
					width: 20%;
				}

				.rightView {
					margin-left: 64rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(94, 103, 110, 1);
					font-family: MiSans;
					width: 80%;
				}
			}
		}
	}
</style>